<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div>
    <div id="center">
      <div class="percent">
        <ul class="user_Overview flex left_top_wrap">
          <div>
            <li class="user_Overview-item" style="color: #00fdfa">
              <div class="user_Overview_nums allnum">
                <dv-digital-flop :config="co2Emi" style="width:100%;height:100%;" />
              </div>
              <p>CO2 Emission(kt)</p>
            </li>
            <li class="user_Overview-item" style="color: #07f7a8">
              <div class="user_Overview_nums online">
                <dv-digital-flop :config="decarCAPEX" style="width:100%;height:100%;" />
              </div>
              <p>DecarbonCAPEX(k$)</p>
            </li>
          </div>

          <div>
            <li class="user_Overview-item" style="color: #e3b337">
              <div class="user_Overview_nums offline">
                <dv-digital-flop :config="fuelOPEX" style="width:100%;height:100%;" />
              </div>
              <p>Fuel OPEX(k$)</p>
            </li>
            <li class="user_Overview-item" style="color: #f5023d">
              <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="carbonTax" style="width:100%;height:100%;" />
              </div>
              <p>Carbon Tax(k$)</p>
            </li>
          </div>
        </ul>
      </div>
      <div class="down">
        <div class="ranking bg-color-black">
          <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let style = {
  fontSize: 16
};
export default {
  data() {
    return {
    };
  },
  computed: {
    chartingData: function() {
      let res = [];
      try {
        let chartingTable = this.$store.state.setting.lastSEIASComputed
          .chartingTable;
        let charteringModel = this.$store.state.setting.lastSEIASData
          .charteringModel;
        let selectModel = this.$store.state.setting.lastSEIASData.selectModel;
        let index = this.$store.state.setting.lastSEIASData.selectOptions.deliveryYear.indexOf(
          selectModel.deliveryYear
        );
        res = [
          {
            name: "Operating year",
            value: selectModel.deliveryYear
          },
          {
            name: "Freight",
            value: "$" + charteringModel.Freight
          },
          {
            name: "Increasing rate of Freight per year",
            value: charteringModel.increasingRateFreight + "%"
          },
          {
            name: "Daily chart rate	",
            value: "$" + charteringModel.expectedDailyChartRate
          },
          {
            name: "Increasing rate of Chart rate per year	",
            value: charteringModel.increasingRatioChartRate + "%"
          },
          {
            name: "Profit	",
            value: "$" + chartingTable.periodProfit[index].toFixed(0)
          },
          {
            name: "Freight Break-even Point",
            value: "$" + chartingTable.freightBreakPoint[index].toFixed(0)
          },
          {
            name: "Daily rental Break-even Point",
            value: "$" + chartingTable.dailyRentalBreakPoint[index].toFixed(0)
          }
        ];
      } catch (error) {
        console.log(error);
      }
      return res;
    },
    newBuildingData: function() {
      let res = [];
      try {
        let cashFlowTable = this.$store.state.setting.lastSEIASComputed
          .cashFlowTable;
        let input = this.$store.state.setting.lastSEIASData.selfOperatingModel;
        res = [
          {
            name: "Freight",
            value: "$" + input.freight
          },
          {
            name: "Increasing rate of Freight per year",
            value: input.increasingRateFreight + "%"
          },
          {
            name: "IRR",
            value: cashFlowTable.irrWithCarbontax * 100 + "%"
          },
          {
            name: "NPV",
            value: "$" + cashFlowTable.totalAssetWithCarbontax.toFixed(0)
          },
          {
            name: "Payback period",
            value: cashFlowTable.paybackPeriodWithCarbontax
          },
          {
            name: "Profit Year",
            value: cashFlowTable.profitYearWithCarbontax
          }
        ];
      } catch (error) {
        console.log(error);
      }
      return res;
    },
    ranking: function() {
      let econData = [];
      try {
        econData = this.$store.state.setting.lastSEIASData.radioModel
          .isChartering
          ? this.chartingData
          : this.newBuildingData;
      } catch (error) {
        console.log(error);
      }
      return {
        data: econData,
        sort: false,
        rowNum: 8,
        carousel: "single",
        unit: ""
      };
    },

    co2Emi: function() {
      let res = [];
      try {
        let totalDecarbonCO2 = this.$store.state.setting.lastSEIASComputed
          .emisCost.totalDecarbonCO2;
        let total = totalDecarbonCO2.reduce((a, c) => a + c, 0) / 1000;
        res.push(isNaN(total) ? 0 : total);
      } catch (error) {
        console.log(error);
      }
      return {
        formatter: this.formatter,
        number: res,
        content: "{nt}",
        style: {
          fontSize: 16,
          fill: "#00fdfa"
        }
      };
    },
    decarCAPEX: function() {
      let res = [];
      try {
        let totalDecarbonCAPEX = this.$store.state.setting.lastSEIASComputed
          .emisCost.totalDecarbonCAPEX;
        res.push(totalDecarbonCAPEX.reduce((a, c) => a + c, 0) / 1000);
      } catch (error) {
        console.log(error);
      }
      return {
        formatter: this.formatter,
        number: res,
        content: "{nt}",
        style: {
          fontSize: 16,
          fill: "#07f7a8"
        }
      };
    },
    fuelOPEX: function() {
      let res = [];
      try {
        let totalFuelOPEX = this.$store.state.setting.lastSEIASComputed.emisCost
          .totalFuelOPEX;
        let total = totalFuelOPEX.reduce((a, c) => a + c, 0) / 1000;
        res.push(isNaN(total) ? 0 : total);
      } catch (error) {
        console.log(error);
      }
      return {
        formatter: this.formatter,
        number: res,
        content: "{nt}",
        style: {
          fontSize: 16,
          fill: "#e3b337"
        }
      };
    },
    carbonTax: function() {
      let res = [];
      try {
        let totalCostCarbon = this.$store.state.setting.lastSEIASComputed
          .totalCostCarbon;
        let total = totalCostCarbon.reduce((a, c) => a + c, 0) / 1000;
        res.push(isNaN(total) ? 0 : total);
      } catch (error) {
        console.log(error);
      }
      return {
        number: res,
        content: "{nt}",
        formatter: this.formatter,
        style: {
          fontSize: 16,
          fill: "#f5023d"
        }
      };
    }
  },
  methods: {
    formatter(number) {
      const numbers = number
        .toString()
        .split("")
        .reverse();
      const segs = [];
      while (numbers.length) segs.push(numbers.splice(0, 3).join(""));
      return segs
        .join(",")
        .split("")
        .reverse()
        .join("");
    },
  }
};
</script>

<style lang='scss' scoped>
.left_top_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 14px;
    }

    .user_Overview_nums {
      width: 105px;
      height: 105px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 5px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("../../assets/img/left_top_lan.png");
        background-size: 100% 100%;
      }
    }

    .online {
      &::before {
        background-image: url("../../assets/img/left_top_lv.png");
        background-size: 100% 100%;
      }
    }

    .offline {
      &::before {
        background-image: url("../../assets/img/left_top_huang.png");
        background-size: 100% 100%;
      }
    }

    .laramnum {
      &::before {
        background-image: url("../../assets/img/left_top_hong.png");
        background-size: 100% 100%;
      }
    }
  }
}
#center {
  display: flex;
  flex-direction: row;
  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;
      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }
  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 255px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 5px;
    }
    .ranking {
      padding: 10px;
      width: 100%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        height: 120px;
        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }
      .water {
        width: 100%;
        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>